<template>
  <wd-config-provider :themeVars="themeVars">
    <slot />
    <wd-toast />
    <wd-message-box />
    <view class="h-12 flex justify-evenly items-center fixed bottom-0 left-0 w-full bg-white">
      <wd-input
        :maxlength="8"
        type="text"
        v-model="input"
        placeholder="请输入用户名"
        @confirm="send"
      />
      <view class="flex items-center">
        <view class="mx-1"><wd-icon name="thumb-up" size="22px"></wd-icon></view>
        <view class="mx-1"><wd-icon name="chat1" size="22px"></wd-icon></view>
        <view class="mx-1"><wd-icon name="star" size="22px"></wd-icon></view>
        <view class="mx-1"><wd-icon name="share" size="22px"></wd-icon></view>
      </view>
    </view>
  </wd-config-provider>
</template>

<script lang="ts" setup>
import { addCommentAPI, CommentVO } from '@/service/comment/comment'
import type { ConfigProviderThemeVars } from 'wot-design-uni'
import {  useUserStore } from '@/store'
const {  userInfo, } = useUserStore()
const input = ref<string>('')
function send(event) {
  addComment()
}
const comment = ref<CommentVO>({
  avatarUrl: '',
  content: '',
  postId: 1,
  userId: userInfo.id,
  username: '',
})
onLoad(() => {
  
})
const {
  loading: loading,
  error: err,
  data: data,
  run: addComment,
} = useRequest<Boolean>(() => addCommentAPI(comment.value))

const themeVars: ConfigProviderThemeVars = {
  // colorTheme: 'red',
  // buttonPrimaryBgColor: '#07c160',
  // buttonPrimaryColor: '#07c160',
}
</script>
